<template>
	<xh-pages>
		<view class="page">
			<view class="p-4">
				<view class="flex bg-white rounded-4 p-2 mb-6">
					<view class="flex-1 text-center py-4 rounded-4">
						<view class="text-primary font-weight-600 h8" @tap="openWin({url:'/pages/users/dealer/team/index'})">
							{{ userinfo.team_sum }}
						</view>
						<view class="h10 text-dark-light-5 mt-2">邀请总人数</view>
					</view>
					<view class="flex-1 text-center py-4 rounded-4">
						<view class="text-primary font-weight-600 h8">{{ userinfo.order_sum }}</view>
						<view class="h10 text-dark-light-5 mt-2">分销总额</view>
					</view>
					<view class="flex-1 text-center py-4 rounded-4" @tap="openWin({url:'/pages/users/dealer/bill/index'})">
						<view class="text-primary font-weight-600 h8">{{ userinfo.amount_total }}</view>
						<view class="h10 text-dark-light-5 mt-2">分销累计收益</view>
					</view>
				</view>
				<view class="bg-white p-6 rounded-6 flex flex-center mb-6">
					<view class="flex-1 flex">
						<view class="mr-6 text-danger">
							<view class="h10">订单</view>
							<view class="pt-4 h2 font-weight-600">
								{{ siteInfo.dealer.dealer_order_price }}%
							</view>
						</view>
						<view class="flex-1" v-if="siteInfo.dealer?.dealer_level >= 10">
							<view class="h10">一级</view>
							<view class="pt-4 h6 font-weight-600">
								{{ siteInfo.dealer.dealer_level_one }}%
							</view>
						</view>
						<view class="flex-1" v-if="siteInfo.dealer?.dealer_level > 10">
							<view class="h10">二级</view>
							<view class="pt-4 h6 font-weight-600">
								{{ siteInfo.dealer.dealer_level_two }}%
							</view>
						</view>
						<view class="flex-1" v-if="siteInfo.dealer?.dealer_level > 20">
							<view class="h10">三级</view>
							<view class="pt-4 h6 font-weight-600">
								{{ siteInfo.dealer.dealer_level_three }}%
							</view>
						</view>
					</view>
				</view>
				<view class="bg-white rounded-6 p-6 flex flex-column">
					<view class="flex flex-center pb-6 border-bottom">
						<view class="flex-1 h6 font-weight-600">分销链接</view>
						<view class="h10 text-primary" @tap="openWin({ url: '/pages/users/dealer/poster/index' })">
							分享海报
						</view>
					</view>
					<!-- #ifdef H5 -->
					<view class="py-4 flex flex-y-center" @tap="copyLink">
						<u-icon name="attach" color="var(--xl-primary)" :size="20" />
						<view class="text-primary flex-1 text-ellipsis-1 ml-2">{{ dealer.link }}</view>
						<view class="p-4 font-weight-600 text-primary h9">复制</view>
					</view>
					<view class="text-center mb-4 pt-4">
						<image v-if="dealer.qrcode" :src="dealer.qrcode" class="qrcode border rounded-4" />
					</view>
					<view class="text-dark-light-5 h9 mb-4">
						如果客户通过该链接注册本平台 ， 该客户将永久綁定为您的下级客户 ， 该客户在该平台的所有消订单会按照当前分销比例返还到您的账户中
					</view>
					<view class="text-danger h9 mb-4">
						分销奖励计算公式：订单金额 * 订单比例 * 分销比例
					</view>
					<view class="text-dark-light-5 h9">
						如：订单金额100元，订单比例为20%，一级分销比例为50%，则分销奖励为：100 * 20% * 50% = 10元
					</view>
				</view>
			</view>
		</view>
	</xh-pages>
</template>

<script lang="ts" setup>
import { useSite } from '@/stores/site';
import { useUserStore } from '@/stores/user';
import { openWin } from '@/utils/helpers';

const siteInfo = storeToRefs(useSite()).siteInfo
const userinfo = storeToRefs(useUserStore()).userInfo

const dealer = ref({
	link: '',
	qrcode: '',
})
onLoad((options: any) => {
	getDealer();
})
const getDealer = () => {
	uni.$u.http.get('Dealer/index').then((res: any) => {
		dealer.value = res.data;
	})
}
const copyLink = () => {
	uni.setClipboardData({
		data: dealer.value.link
	})
}
</script>

<style lang="scss" scoped>
.page {
	min-height: calc(100vh - var(--window-top));
}

.qrcode {
	width: 200px;
	height: 200px;
}
</style>
